import {DatePicker, NavBar} from "antd-mobile";
import './index.scss';
import {useEffect, useMemo, useState} from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import {useSelector} from "react-redux";
import _ from 'lodash';
import DailyBill from "@/pages/Month/components/Day/DailyBill";

const Month = (factory, deps) => {
    const billList = useSelector(state => state.bill.billList)
    // 当前月记账信息
    const [currentMonthList, setCurrentMonthList] = useState([])
    // 控制日期选择器的弹窗
    const [dateVisible, setDateVisible] = useState(false)
    // 当前年-月
    const [currentDate, setCurrentDate] = useState(() => {
        return dayjs(new Date()).format('YYYY-MM')
    })

    // 对页面数据进行分组
    const monthGroup = useMemo(() => {
        return _.groupBy(billList, (item) =>
            dayjs(item.date).format('YYYY-MM')
        )
    }, [billList])

    // 初始化的时候渲染
    useEffect(() => {
        if (monthGroup[currentDate]) {
            setCurrentMonthList(monthGroup[currentDate])
        }
    }, [currentDate, monthGroup]);

    // 计算当前月记账信息
    const monthResult = useMemo(() => {
        // 支出
        const pay = currentMonthList.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
        // 收入
        const income = currentMonthList.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
        // 结余
        return {
            pay,
            income,
            total: income + pay
        }
    })

    /**
     * 点击确认
     * @param date 日期
     */
    const onConfirmDatePicker = (date) => {
        const formatDate = dayjs(date).format('YYYY-MM')
        setCurrentDate(formatDate)
        if (monthGroup[formatDate]) {
            setCurrentMonthList(monthGroup[formatDate])
        }
    }

    const dayGroup = useMemo(() => {
        const groupData = _.groupBy(currentMonthList, (item) =>
            dayjs(item.date).format('YYYY-MM-DD')
        )
        const tempKeys = Object.keys(groupData)
        const sortKeys = _.sortBy(tempKeys, (date) => new Date(date))
        return {
            groupData,
            keys: sortKeys
        }
    }, [currentMonthList])

    return (
        <div className='monthlyBill'>
            <NavBar className='nav' backIcon={false}>
                月度收支
            </NavBar>
            <div className='content'>
                <div className='header'>
                    {/* 时间切换区域 */}
                    <div className='date' onClick={() => setDateVisible(true)}>
                        <span className='text'>
                            {currentDate + ''}月账单
                        </span>
                        {/*实现弹窗关闭箭头朝下，打开弹窗箭头朝上*/}
                        <span className={classNames('arrow', dateVisible && 'expand')}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className='item'>
                            <span className='money'>{monthResult.pay.toFixed(2)}</span>
                            <span className='type'>支出</span>
                        </div>
                        <div className='item'>
                            <span className='money'>{monthResult.income.toFixed(2)}</span>
                            <span className='type'>收入</span>
                        </div>
                        <div className='item'>
                            <span className='money'>{monthResult.total.toFixed(2)}</span>
                            <span className='type'>结余</span>
                        </div>
                    </div>
                    {/* 时间选择 */}
                    <DatePicker className='kaDate'
                                title="记账日期"
                                precision="month"
                                visible={dateVisible}
                                onConfirm={onConfirmDatePicker}
                                onClose={() => {
                                    setDateVisible(false)
                                }}
                                max={new Date()}
                    >
                    </DatePicker>
                </div>
                {/* 单日列表统计 */}
                {
                    dayGroup.keys.map(key => {
                        return (<DailyBill key={key} date={key} billList={dayGroup.groupData[key]}/>)
                    })
                }
            </div>
        </div>
    )

}
export default Month